<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">客户管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/lineChinnel' }">
          <div class="div2">跟进类型设置</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 添加客户等级 -->
    <div class="content">
      <h2>跟进记录设定</h2>
      <h3>数据筛选</h3>
      <el-form :inline="true" id="search">
        <el-form-item label="内容:">
          <el-input
            v-model.trim="search.name"
            size="mini"
            placeholder="请输入内容"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态类型:">
          <el-select
            v-model="search.status"
            placeholder="请选择订单类型"
            size="mini"
            clearable
          >
            <el-option
              v-for="item in stateType"
              :key="item.dictId"
              :label="item.dictName"
              :value="item.dictId"
              clearable
              filterable
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="fetchData('search')"
            >查询</el-button
          >
          <el-button
            type="primary"
            size="mini"
            plain
            @click="fetchData('reset')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 添加客户等级 -->
    <!-- 管理客户等级 -->
    <div class="manage">
      <div style="display: flex; justify-content: space-between">
        <p class="header">跟进类型列表</p>
        <el-button
          v-if="parArray.indexOf('addJcRecord') != -1"
          type="primary"
          style="width: 120px; height: 36px; line-height: 13px"
          @click="openDialog('add')"
          >新 增</el-button
        >
      </div>

      <div class="table">
        <el-table
          border
          :header-cell-style="{ background: '#f8f8f8' }"
          :data="tableData.list"
        >
          <el-table-column type="index" label="序号" width="100">
          </el-table-column>
          <el-table-column min-width="150px" scope="scope" label="内容">
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.edit"
                v-model="scope.row.name"
              ></el-input>
              <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="150px" scope="scope" label="状态类型">
            <template slot-scope="scope">
              <span>{{
                scope.row.status == 0
                  ? "无"
                  : "" || scope.row.status == 1
                  ? "接通"
                  : "" || scope.row.status == 2
                  ? "未接通"
                  : "" || scope.row.status == 3
                  ? "已添加"
                  : "" || scope.row.status == 4
                  ? "未添加"
                  : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createdTime"
            label="更新时间"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="optain">
                <el-button
                  type="text"
                  @click="openDialog('edit', scope.row)"
                  v-if="parArray.indexOf('editRecord') != -1 && !scope.row.edit"
                >
                  编辑
                </el-button>
                <el-button
                  type="text"
                  style="color: #f33f3f"
                  v-if="parArray.indexOf('delectRecord') != -1"
                  @click="delect(scope.row, scope.$index)"
                >
                  <span>删除</span>
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页start -->
        <div class="page">
          <div class="block">
            <el-pagination
              @size-change="handleSizeEmplay"
              @current-change="handleCurrentChange"
              :current-page.sync="pageNo"
              :page-size="pageSize"
              layout="total,sizes,prev, pager, next"
              prev-text="上一页"
              next-text="下一页"
              :total="tableData.totalNum"
            >
            </el-pagination>
          </div>
        </div>
        <!-- 分页end -->
      </div>
    </div>
    <!-- 管理客户等级 -->
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      width="30%"
      :before-close="handleClose"
      append-to-body
    >
      <el-form
        :model="dialogForm"
        :rules="rules"
        ref="dialogForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="状态类型:" prop="status">
          <el-select
            v-model="dialogForm.status"
            placeholder="请选择状态类型"
            clearable
          >
            <el-option
              v-for="item in stateType"
              :key="item.dictId"
              :label="item.dictName"
              :value="item.dictId"
              clearable
              filterable
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容:" prop="name">
          <el-input
            type="textarea"
            v-model="dialogForm.name"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="display: flex; justify-content: right">
        <el-button @click="dialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="submit('dialogForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {

      tableData: [],
      pageNo: 1,
      pageSize: 10,
      limits: "",
      parArray: [],
      search: {
        name: "",
        status: "",
      },
      dialogForm: {
        status: "",
        name: ""
      },
      stateType: [],
      dialog: { title: "新增", visible: false, type: "" },
      rules: {
        name: [
          { required: true, message: '请输选择状态类型', trigger: 'blur' },

        ],
        status: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
      },
      id: ""
    };

  },
  created () {
    this.listAxios("1");
    this.getStateType()
    // 权限设定判断 normsCode
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "recordSetting"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断 normsCode
  },
  activated () {
    // this.listAxios("1");
    // this.groupEvent();
  },
  methods: {
    fetchData (type) {
      if (type == 'search') {
        this.listAxios()
      } else {
        this.search.name = ""
        this.search.status = ""
        this.listAxios()
      }
    },
    // 新增/编辑提交
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialog.type == 'add') {
            this.addRecord()
          } else {
            this.updateRecord()
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
    openDialog (type, row) {

      console.log(type, row)
      if (type == 'add') {
        this.dialog.title = "新增"
        this.dialog.visible = true
        this.dialog.type = 'add'
        this.dialogForm.name = ""
        this.dialogForm.status = ""
        this.$nextTick(() => {
          this.$refs['dialogForm'].clearValidate()

        })

      } else {
        this.dialog.title = "编辑"
        this.dialog.visible = true
        this.dialog.type = 'edit'
        this.dialogForm.name = row.name
        this.dialogForm.status = row.status + ''
        this.id = row.id
        this.$refs['dialogForm'].clearValidate()

      }
    },
    // clearValidate (formName) {
    //   this.$refs['formName'].clearValidate()
    // },
    handleClose () {
      this.dialog.visible = false
    },
    // 列表
    listAxios () {
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        name: this.search.name,
        status: this.search.status,
      }
      this.$api.getFollowUpRecord(params).then((res) => {
        console.log(res, "resssssssssss")
        if (res.code == 0) {
          this.tableData = res.data;
        }

      });
    },
    // 新增跟进记录
    addRecord () {
      const data = {
        name: this.dialogForm.name,
        status: this.dialogForm.status
      }
      this.$api.setFollowUpRecord(data).then((res) => {
        console.log(res, "新增提交")
        if (res.code == 0) {
          console.log(res, "新增")
          this.$message.success('新增成功！')
          this.dialog.visible = false
          this.listAxios()
        }
      }).catch((err) => { console.log(err) })
    },
    updateRecord () {
      const data = {
        name: this.dialogForm.name,
        status: this.dialogForm.status,
        id: this.id
      }
      this.$api.updateFollowUpRecord(data).then((res => {
        console.log(res, "编辑")
        if (res.code == 0) {
          this.$message.success('修改成功！')
          this.dialog.visible = false
          this.listAxios()
        }

      }))
    },

    searchEvent () {
      this.pageNO = 1;
      this.pageSize = 10;
      this.listAxios();
    },
    /***分页查询***/
    handleSizeEmplay (val) {
      this.pageSize = val
      this.listAxios();

    },
    handleCurrentChange (val) {
      this.pageNo = val;
      this.listAxios();
    },

    //**入线渠道设定**//
    onSubmit () {
      if (this.formInline.name == "") {
        this.$message.error("名称不能为空");
      } else {
        this.axios
          .post(
            "/order/trackingRecording/add",
            {
              createdBy: sessionStorage.getItem("user_id"),
              name: this.formInline.name,
            },
            {
              headers: {
                isloading: false,
              },
            }
          )
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("添加成功");
              this.formInline.name = "";
              this.listAxios();
            } else {
              this.$message.error(res.message);
            }
          });
      }
    },
    //**入线渠道设定**//
    /***删除数据对接***/
    delect (row, index) {
      this.$confirm("确定要删除该记录吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios.get("/order/trackingRecording/delete?id=" + row.id).then((res) => {
            //   console.log(res);
            if (res.code == 0) {
              this.tableData.list.splice(index, 1);
              // this.listAxios("1");
              this.$message.success("删除成功");
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /***删除数据对接***/

    /***修改数据对接***/
    preservation (row) {
      this.axios
        .post("/order/trackingRecording/update", {
          id: row.id,
          updatedBy: sessionStorage.getItem("user_id"),
          name: row.name,
        })
        .then((res) => {
          //   console.log(res);
          this.listAxios();
          if (res.code == 0) {
            this.$message.success("修改成功");
          } else {
            this.$message.error(res.message);
          }
        });
    },
    /***修改数据对接***/
    // 状态类型
    getStateType () {
      this.axios.get("/sys/v1/common/by/group?groupId=" + "tractring_record_type", {
        headers: {
          isLoading: false,
        },
      }).then((res) => {
        if (res.code == 0) {
          console.log(res, "resss")
          this.stateType = res.data
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.content {
  margin-bottom: 20px;
  padding: 20px 0 0px 20px;
  background-color: #ffffff;
  h2 {
    position: relative;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-bottom: 20px;
    &:before {
      position: absolute;
      top: 4px;
      left: 0;
      display: inline-block;
      content: "";
      width: 3px;
      height: 20px;
      background-color: #2d7edf;
    }
  }
  .btn-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
  }
}

.demo-form-inline {
  margin-top: 10px;
}

/deep/.el-input__inner {
  height: 30px;
  line-height: 30px;
}

.manage {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  .header {
    font-size: 16px;
    margin-bottom: 20px;
  }
}

/deep/.has-gutter .cell {
  text-align: center;
  color: #2d7ddf;
}

/deep/.cell {
  text-align: center;
}

/deep/.el-table__row .cell {
}

.optain {
  width: 100%;
  text-align: center;
}

.name {
  font-size: 16px;
  color: #2d7edf;
  margin: 10px 0;
}

.optain {
  p {
    display: inline-block;
    margin-left: 20px;

    img {
      width: 20px;
      height: 20px;
    }
  }
}

.page {
  margin: 20px 0;
  text-align: right;
  width: 100%;

  span {
    font-size: 15px;
    color: #888;
    display: inline-block;
    margin-left: 10px;
    margin-top: -2px;
    vertical-align: middle;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
</style>
